<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李志 - 下雨</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .audio-container {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
        }
        .lyrics {
            white-space: pre-line;
            font-size: 16px;
            text-align: center;
        }
        .lyrics-scroll {
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .lyrics-line {
            margin: 2px 0;
            transition: all 0.5s ease;
        }
        .lyrics-line.small {
            font-size: 14px;
            opacity: 0.7;
        }
        .lyrics-line.large {
            font-size: 20px;
            color: #9c27b0;
            opacity: 1;
        }
        .artist-info {
            text-align: center;
            font-style: italic;
            color: #666;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>下雨</h1>
        <div class="artist-info">演唱：李志</div>
        
        <div class="audio-container">
            <audio controls>
                <source src="下雨.mp3" type="audio/mpeg">
                您的浏览器不支持音频播放。
            </audio>
            <div class="lyrics-scroll" id="lyricsScroll">
                <div class="lyrics-line small"></div>
                <div class="lyrics-line large"></div>
                <div class="lyrics-line small"></div>
            </div>
            <script>
                const audio = document.querySelector('audio');
                const lyricsScroll = document.getElementById('lyricsScroll');
                const lines = lyricsScroll.querySelectorAll('.lyrics-line');
                
                // 歌词数据（时间和文本）
                const lyricsData = [
                    { time: 1, text: '下雨' },
                    { time: 10, text: '李志' },
                    { time: 20, text: '小草制作' },
                    { time: 30, text: '下起了雨，你感到冷吗' },
                    { time: 36, text: '看到窗前迷人的黑色吗' },
                    { time: 42, text: '忧伤的人，忧伤都写在脸上' },
                    { time: 49, text: '忧伤只是为了说谎' },
                    { time: 56, text: '还是搞不懂，岁岁年年为了什么' },
                    { time: 62, text: '上帝他死了，不能把你悄悄带走' },
                    { time: 68, text: '年轻的坟墓不在一起' },
                    { time: 78, text: '下起了雨，慌乱中爬过的蚂蚁' },
                    { time: 85, text: '它的鼻子在寻找谁的气息' },
                    { time: 91, text: '四季轮替，你觉得累吗' },
                    { time: 98, text: '面对黄昏你还有信心吗' },
                    { time: 103, text: '还是搞不懂，忙忙碌碌为了什么' },
                    { time: 110, text: '什么都别说，重复是你最好的选择' },
                    { time: 117, text: '选择颠覆盛世的荒唐' },
                    { time: 174, text: '无所事事，你站在雨里' },
                    { time: 181, text: '闭上眼睛也感觉不到力气' },
                    { time: 187, text: '不能忘记，不能忘乎所以' },
                    { time: 194, text: '不能继续就这样沉下去' },
                    { time: 200, text: 'Hello kitty，hello hello hello kitty' },
                    { time: 206, text: 'Hello kitty，hello hello hello kitty' },
                    { time: 212, text: 'Hello nmb 的kitty' },
                    { time: 219, text: '下起了雨，在你的心里' },
                    { time: 225, text: '下起了雨，在你的怀里' },
                    { time: 232, text: '下起了雨，在你的眼里' },
                    { time: 238, text: '下起了雨，在你的心里' },
                    { time: 244, text: '下起了雨……' }
                ];
                
                let currentIndex = -1;
                
                // 更新显示的歌词
                function updateLyrics(index) {
                    if (index < 0) {
                        lines.forEach(line => line.textContent = '');
                        return;
                    }
                    
                    // 第一行显示上一句（如果有）
                    lines[0].textContent = index > 0 ? lyricsData[index - 1].text : '';
                    // 第二行显示当前句
                    lines[1].textContent = lyricsData[index].text;
                    // 第三行显示下一句（如果有）
                    lines[2].textContent = index < lyricsData.length - 1 ? lyricsData[index + 1].text : '';
                }
                
                // 监听音频播放时间更新
                audio.addEventListener('timeupdate', () => {
                    const currentTime = Math.floor(audio.currentTime);
                    
                    // 查找当前应该显示的歌词索引
                    let newIndex = -1;
                    for (let i = lyricsData.length - 1; i >= 0; i--) {
                        if (lyricsData[i].time <= currentTime) {
                            newIndex = i;
                            break;
                        }
                    }
                    
                    // 如果索引变化，更新歌词显示
                    if (newIndex !== currentIndex) {
                        currentIndex = newIndex;
                        updateLyrics(currentIndex);
                    }
                });
            </script>
        </div>
        
        <div class="lyrics">
下起了雨，你感到冷吗
看到窗前迷人的黑色吗
忧伤的人，忧伤都写在脸上
忧伤只是为了说谎
还是搞不懂，岁岁年年为了什么
上帝他死了，不能把你悄悄带走
年轻的坟墓不在一起

下起了雨，慌乱中爬过的蚂蚁
它的鼻子在寻找谁的气息
四季轮替，你觉得累吗
面对黄昏你还有信心吗
还是搞不懂，忙忙碌碌为了什么
什么都别说，重复是你最好的选择
选择颠覆盛世的荒唐
无所事事，你站在雨里
闭上眼睛也感觉不到力气
不能忘记，不能忘乎所以
不能继续就这样沉下去

Hello kitty，hello hello hello kitty
Hello kitty，hello hello hello kitty
Hello nmb 的kitty

下起了雨，在你的心里
下起了雨，在你的怀里
下起了雨，在你的眼里
下起了雨，在你的心里
下起了雨……
        </div>
    </div>
</body>
</html>